html {
  --main-color: #1446cc;
  --main-color-rgb: 20, 70, 204;

  --body-color: var(--bs-body-color);


  --bs-shadow: 0 .0417rem .0833rem rgba(var(--bs-body-color-rgb), 0.15);
  --bs-shadow-active: 0 .0208rem .0417rem rgba(var(--bs-body-color-rgb), 0.15);
  --xiaomi-shadow: 0 0.0781rem .1563rem rgba(0, 0, 0, .1);
  --xiaomi-shadow-active: 0 .0391rem .0781rem rgba(0, 0, 0, .1);


  --transition-duration: .2s;
  --bs-nice-shadow: 0 0 0 .0208rem rgba(var(--main-color-rgb), .25);

  overflow-x: hidden !important;

  body {
    // background-color: #f5f5f5;
    font-size: .085rem;

    // 光标
    #magicPointer {
      height: .125rem;
      width: .125rem;
      mix-blend-mode: difference;
      box-shadow: 0px 0px 15px -5px #fff;
      z-index: 9999;

      &.pointer-overlay {
        height: .2604rem;
        width: .2604rem;
      }
    }

    .iconfont {
      // font-size: .15rem;
      // font-weight: bold;

      &:hover {
        color: var(--main-color);
      }
    }
  }
}

* {
  ::selection {
    background-color: var(--main-color);
    color: #fff;
  }

  caret-color: var(--main-color) !important;

  // cursor: none !important;

  // border-color: var(--bs-border-color);
}

@keyframes fadeIn {
  from {
    // opacity: 0.5;
    // transform: translateY(0.1rem) scale(0.85);
  }

  to {
    // opacity: 1;
    // transform: translateY(0) scale(1);
  }
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  display: flex;
  align-items: center;

  padding: .06rem .15rem;
  height: .5rem;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);

  // color: rgba(255, 255, 255, .6);
  color: #fff;
  // transition: top .7s ease-in-out, color var(--transition-duration);
  // transition: color var(--transition-duration);
  transition: all var(--transition-duration), top .7s ease-in-out;

  &.hide {
    top: -100%;
  }

  .iconfont {
    font-size: .15rem;

    &:hover {
      color: #fff
    }
  }

  .navbar-brand {
    img {
      height: 0.28rem;
    }
  }

  .pharmacyBtn {
    margin-left: 0.35rem;

    display: flex;
    align-items: center;

    &:hover {
      // color: var(--main-color);
      color: #fff;
    }

    .location {
      display: flex;
      align-items: center;
      margin-left: 0.037rem;

      .pharmacy-text {
        font-size: 0.11rem;
      }
    }
  }

  .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 0.2rem;

    .nav-item {
      position: relative;
      transition: all var(--transition-duration);

      a {
        padding: .07rem 0.08rem;
        font-size: .115rem;

        &:hover,
        &.active {
          // color: var(--main-color);
          color: #fff;

          &::after {
            position: absolute;
            left: 50%;
            bottom: -.04rem;

            content: '';

            width: 35%;
            height: .015rem;
            border-radius: 1vh;
            // background-color: var(--main-color);
            background-color: #fff;

            transform: translateX(-50%);
          }
        }
      }
    }
  }

  .navbar-right {
    margin-left: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;

    form {
      display: flex;
      align-items: center;

      input {
        --main-color: #fff;
        width: 0;

        margin: 0;
        padding: .06rem 0;
        background-color: transparent;

        border: none;
        border-radius: 999rem;

        font-size: .1rem;
        transition: all var(--transition-duration);

        &:focus {

          margin-right: .05rem;
          padding: .06rem 0.11rem;
          width: auto;
          border: .0052rem solid var(--main-color);

          // box-shadow: var(--bs-nice-shadow);
          box-shadow: 0 0 0 .0208rem rgba(255, 255, 255, .25);
        }
      }

    }

  }
}

.banner {
  position: relative;
  // height: 4.8rem;
  height: 100vh;

  .indicator {
    position: absolute;
    left: 50%;
    bottom: .15rem;
    transform: translateX(-50%);
    z-index: 999;

    display: flex;
    justify-content: space-between;
    gap: .15rem;

    &>div {
      height: 0.028rem;
      width: .9rem;

      background-color: #fff;
      opacity: 0.5;

      border-radius: 999rem;

      &.active {
        opacity: 1;
      }
    }

    // background-color: pink;
  }

  .imgBox {
    position: relative;

    margin: auto;

    width: 100%;
    height: 100%;

    animation: zoom linear forwards;
    animation-timeline: scroll();
    animation-range: 0vh 90vh;

    overflow: hidden;

    @keyframes zoom {
      from {
        width: 100%;
      }

      to {
        width: 65%;
        border-radius: .3rem;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      transition: all var(--transition-duration);
    }
  }
}

.container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  margin: .5rem auto .3rem;

  width: 6.4rem;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 0.03rem;

    font-size: 1.1em;

    a {
      margin-left: auto;
      transition: all var(--transition-duration);

      &:hover {
        color: var(--main-color);
        transform: translateX(0.03rem);
      }

      &:active {
        transform: translateX(0.05rem);
      }

      i {
        font-size: inherit;
      }
    }
  }

  .tools {
    animation: fadeIn linear forwards;
    animation-timeline: scroll();
    animation-range: .5rem 70vh;

    .row {
      display: flex;
      justify-content: space-between;

      .tool-item {
        --hover-color: var(--main-color);


        position: relative;

        width: .62rem;
        height: 0.7rem;

        padding: .05rem .1rem;
        border-radius: 0.03rem;
        // background-color: pink;
        background-color: #fff;

        transition: all var(--transition-duration);

        cursor: pointer;

        &.znwz {
          --hover-color: #2261c8;

          img {
            transform: translateY(.03rem);
          }
        }

        &.jkzx {
          --hover-color: #41b39d;

          img {
            transform: translateY(.04rem);
          }
        }

        &.znpf {
          --hover-color: #ffb900;

          img {
            transform: translateY(.003rem);
          }
        }

        &.znsb {
          --hover-color: #ff4242;

          img {
            transform: translateY(.04rem);
          }
        }

        &.bad {
          &.yfjc {
            padding: .05rem .145rem;

            img {
              transform: translateY(.05rem);
            }
          }

          &.jkzc {
            padding: .05rem .177rem;

            img {
              transform: translateY(.01rem);
            }
          }

          &.smzs {
            padding: .05rem .12rem;

            img {
              transform: translateY(.035rem);
            }
          }

          &.jbdt {
            padding: .05rem .16rem;

            img {
              transform: translateY(.02rem);
            }
          }
        }

        &:hover {
          transform: translateY(-0.02rem);
          box-shadow: var(--bs-shadow);

          p {
            color: var(--hover-color);
          }
        }

        &:active {
          transform: translateY(-0.005rem);
          box-shadow: var(--bs-shadow-active);
        }

        .tool-link {
          img {
            width: 100%;
          }

          p {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.07rem;

            text-align: center;
            text-wrap: nowrap;
          }
        }
      }
    }
  }

  .appointment {
    animation: fadeIn linear forwards;
    animation-timeline: scroll();
    animation-range: .3rem 95vh;

    .row {
      display: flex;
      justify-content: space-between;

      .appointment-item {
        position: relative;
        box-shadow: var(--bs-shadow);
        border-radius: .09rem;

        .appointment-link {
          color: #fff;

          p,
          a {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }

          .title {
            top: .09rem;
            font-size: 1.8em;
            letter-spacing: .1em;
          }

          .description {
            top: .36rem;
            font-size: 1.1em;
          }

          img {
            &.bg {
              width: 1.7rem;
            }
          }
        }

        img.icon {
          position: absolute;
          right: 0;
          bottom: 0;

          width: .7rem;
          cursor: pointer;

          transition: all var(--transition-duration);

          &:hover {
            transform: scale(1.05);
            // filter: drop-shadow(var(--bs-shadow));
          }

          &:active {
            transform: scale(1.02);
            // filter: drop-shadow(var(--bs-active-shadow));
          }

          &#xxyy-icon {
            height: .65rem;
          }

          &#zjjj-icon {
            // width: 0.65rem;
          }
        }

        .goto {
          position: absolute;
          bottom: -.055rem;
          left: 50%;
          z-index: 1;
          transform: translateX(-50%);

          display: flex;
          align-items: center;

          padding: .04rem 0.13rem;

          background-color: rgb(151, 179, 255);
          border-radius: 999rem;

          color: #fff;

          transition: all var(--transition-duration);

          &:hover {
            transform: translateY(-0.02rem) translateX(-50%);
            box-shadow: var(--bs-shadow);
          }

          &:active {
            transform: translateY(-0.005rem) translateX(-50%);
            box-shadow: var(--bs-shadow-active);
          }
        }

        &:first-child {
          .goto {
            background: linear-gradient(to right, rgba(168, 240, 210, .42), rgb(168, 240, 210, .42));
          }
        }
      }
    }
  }

  .recommend-doctor {
    animation: fadeIn linear forwards;
    animation-timeline: scroll();
    animation-range: .1rem 95vh;

    .header {
      margin-bottom: .07rem;

      p {
        font-size: 1.2em;
        font-weight: 300;
        letter-spacing: .09em;

        i {
          font-size: .95em;
          margin-left: 0.028rem;
        }
      }
    }

    .body {
      ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: .2rem .35rem;

        // background-color: #f5f5f5;

        li {
          .card {
            background-color: #fff;
            border-radius: 0.037rem;

            overflow: hidden;
            cursor: pointer;

            transition: all var(--transition-duration);
            box-shadow: var(--bs-shadow-active);

            .imgBox {
              img {
                height: 1rem;
                width: 100%;

                object-fit: cover;
              }
            }

            .card-body {
              padding: 0.1rem;

              .card-title,
              .secondary-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
              }

              .card-title {
                .name {
                  font-size: 0.1rem;
                  font-weight: 500;
                  letter-spacing: 0.1em;
                }
              }

              .secondary-title {
                margin: 0.05rem 0;

                .score {
                  width: 0.4rem;
                  // background-color: pink;
                }

                .visit-time {
                  span {
                    margin-right: 0.015rem;
                    color: #007AFF;
                  }
                }
              }

              .speciality {
                color: gray;

                &::before {
                  margin-right: 0.05rem;

                  content: '擅长:';

                  font-size: 1.05em;
                  color: #000;
                }
              }
            }

            &:hover {
              transform: translateY(-0.02rem);
              box-shadow: var(--bs-shadow);
            }

            &:active {
              transform: translateY(-0.005rem);
              box-shadow: var(--bs-shadow-active);
            }
          }
        }
      }
    }
  }
}

.copyright {
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: .11rem;

  a {
    color: inherit;
    text-decoration: none;

    i {
      transition: color var(--transition-duration);
      font-size: inherit;
    }

    &:hover {
      text-decoration: underline;

      i {
        color: #c71d23;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 0;
}


// 滑动阻尼 lenis
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

* {
  cursor: none !important;
}